<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="application-container">
		<view class="content">
			<uni-forms ref="form" :modelValue="formData" label-width="80px" label-align="center">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入您的真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="年龄" required name="age">
					<u-slider show-value v-model="formData.age" min="0" max="100"></u-slider>
					<!-- <uni-easyinput v-model="formData.age" placeholder="请输入年龄" /> -->
				</uni-forms-item>
				<uni-forms-item label="性别" required name="sex">
					<uni-data-checkbox @change="changeSex" v-model="formData.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" required name="email">
					<uni-easyinput v-model="formData.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="兴趣爱好" required name="hobby">
					<uni-easyinput type="textarea" v-model="formData.hobby" placeholder="请填写兴趣爱好" />
				</uni-forms-item>
				<uni-forms-item label="自我介绍" required name="introduction">
					<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请填写自我介绍" />
				</uni-forms-item>
				<uni-forms-item label="工作时间" required name="workTime">
					<!-- 返回时间戳 -->
					<uni-datetime-picker type="daterange" return-type="timestamp"
						v-model="formData.workTime" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="btn" @click="submit">提交报名表</button>
	</view>
</template>

<script>
	import {enroll} from "../../../ajax/api/home.js";
	export default {
		data() {
			return {
				formData: {
					name: "", //姓名
					age: 20, //年龄
					sex: 0, //性别
					email: "", //邮箱
					phone: "", //联系电话
					hobby: "", //兴趣爱好
					introduction: "", // 自我介绍
					workTime: [], //工作时间
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请填写您的姓名"
						}, {
							minLength: 2,
							maxLength: 8,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: "请填写您的邮箱"
						}, {
							format: "email",
							errorMessage: "请填写正确的邮箱"
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: "请填写您的联系电话"
						}, {
							validateFunction: (rule, value, data, callback)=>{
								const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
								if (!reg.test(value)) {
									callback("请输入正确的手机号")
								} else {
									callback();
								}
							}
						}]
					},
					hobby:{
						rules:[{
							required: true,
							errorMessage: "请输入你的兴趣爱好"
						}]
					},
					introduction:{
						rules:[{
							required: true,
							errorMessage: "请输入你的自我介绍"
						}]
					},
					workTime:{
						rules:[{
							required: true,
							errorMessage: "请选择您的工作时间"
						}]
					}
				},
				// 性别选择范围
				sexs: [{
						"value": 0,
						"text": "男"
					},
					{
						"value": 1,
						"text": "女",
					},
				],
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			// 切换性别选择
			changeSex(e) {
				this.sex = e.detail.value;
			},
			submit() {
				this.$refs.form.validate().then(async res => {
					const result = await enroll({
						...this.formData,
						recruitInfo:this.$Route.query.id
					})
					uni.switchTab({
						url:"/pages/home/home",
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/application.scss";
</style>
